<!--  -->
<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>商品管理</el-breadcrumb-item>
      <el-breadcrumb-item>分类管理</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card>
      <el-alert class="warning" title="注意：只允许为第三级分类设置相关参数！" type="warning" show-icon :closable="false"></el-alert>
      <el-row :gutter="20">
        <el-col :span="8" class="demo-input-suffix">
          <span>选择商品分类：</span>
          <el-cascader v-model="catceOptionsKeys" :options="catceOptions" :props="catceProps" @change="handleChange" :show-all-levels="false" placeholder="请选择"></el-cascader>
        </el-col>
      </el-row>
      <el-tabs v-model="activeName" @tab-click="handleClick" class="tabs">
        <el-tab-pane label="动态参数" name="dynamic">
          <el-row :gutter="20">
            <el-col :span="4">
              <el-button type="primary" @click="addParams()"> 添加参数</el-button>
            </el-col>
          </el-row>
          <el-table border stripe style="width: 100%" :data="paramsList">
            <el-table-column type="expand">
              <template v-slot="{row}">{{row}}123</template>
            </el-table-column>
            <el-table-column type="index" label="#" align="center"></el-table-column>
            <el-table-column label="权限名称" prop="authName"></el-table-column>
            <el-table-column label="路径" prop="path"></el-table-column>
            <el-table-column label="权限等级" prop="level"> </el-table-column>

          </el-table>
        </el-tab-pane>

        <el-tab-pane label="静态属性" name="Static">属性</el-tab-pane>
      </el-tabs>
    </el-card>
  </div>

</template>

<script>
export default {
  data () {
    return {
      paramsList: [],

      activeName: 'dynamic',

      catceOptions: [],
      catceOptionsKeys: '',
      catceProps: {
        expandTrigger: 'hover',
        value: 'cat_id',
        label: 'cat_name',
        children: 'children'
      }

    }
  },

  created () { // 进入页面就开始执行
    this.getParamsOptions()
  },

  components: {// 组件

  },

  computed: {// 计算属性是属性调用，而methods是函数调用

  },

  methods: { // 存储方法，处理复杂逻辑}
    handleClick () { },
    getParamsOptions () {
      const loding = this.$fullLoading()
      this.$http.get('categories', {}).then(res => {
        res = res.data

        if (res.meta.status !== 200) {
          return this.$message.error('获取商品分类失败！')
        }

        this.catceOptions = res.data
      }).catch(err => {
        this.$message.error(err || '错误')
      }).finally(() => {
        loding.close()
      })
    },
    handleChange () {
      if (this.catceOptionsKeys.length !== 3) {
        this.catceOptionsKeys = []
        return this.$message.error('请选中三级分类')
      }

      const loding = this.$fullLoading()
      this.$http.get('categories/' + this.catceOptionsKeys.slice(-1) + '/attributes', { params: { sel: 'only' } }).then(res => {
        res = res.data
        if (res.meta.status !== 200) {
          return this.$message.error('获取参数失败！')
        }
        this.paramsList = res.data
      }).catch(err => {
        this.$message.error(err || '错误')
      }).finally(() => {
        loding.close()
      })
    },
    addParams () {

    }
  },

  props: []
}
</script>
<style lang='less' scoped>
.demo-input-suffix {
  display: flex;
  justify-content: center;
  align-items: center; /*垂直居中*/
}
.tabs {
  margin-top: 15px;
}
.warning {
  margin-bottom: 15px;
}
</style>
